<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="root"></div>
    <script>
      let React = {
        createElement: function(type, props, children){
          return {
            type: type,
            props: props,
            children: children
          }
        }
      }

      function Header() {
        return React.createElement(
          "div",
          {
            id: "header",
          },
          "我是一个组件"
        );
      }

      //模拟 ReactDOM.render
      function render(vdom, container) {
        // console.log(vdom);
        if (typeof vdom.type === "string") {
          //创建 DOM
          let el = document.createElement(vdom.type);
          el.innerHTML = vdom.children;
          console.log(el);
          container.append(el);
        } else if (typeof vdom.type === "function") {
          //执行组件函数
          let v = vdom.type();
          render(v, container);
        }
      }

      //OK
      // render(React.createElement(
      //     'div',
      //     {
      //       name: 'xxx'
      //     },
      //     'test'
      //   ), document.querySelector('#root'))

      render(React.createElement(
          Header
        ), document.querySelector('#root'))
    </script>
  </body>
</html>
